<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--如果是对象数据类型 会做一个处理JSON.stringify() -->
    <div id="app" style="color:red">
        <li style="color:blue">
            {{arr}}  {{a}}
        </li>
    </div>
    <script src="dist/umd/vue.js"></script>
    <script>
        // 混合 混入  全局混入
        Vue.mixin({ 
            created:function a() {
                console.log('created...')
            }
        })
        Vue.mixin({
            created:function b() {
                console.log('created...')
            }
        })
        // options Api 通过一个选项进行配置
        let vm = new Vue({
            el: '#app',
            data() {
                // 通过数组更新索引和长度更新是无效的
                return { arr: [{a:1}, 2, 3],a:1}
            },
            created() { // 生命周期 就是回调函数， 先订阅好 后续会触发此方法
                console.log('my created')
            },
            updated(){
                console.log('updated')
            }
            // [created1,created2]
        });

        // 批处理  -》 vue异步更新 ，更新数据后不能立刻拿到最新的节点
        // nextTick 等待页面更新好后再获取最终dom
        
        setTimeout(() => {
            vm.arr.push(123);
            vm.arr.push(123);
            vm.arr.push(123);
            vm.arr.push(123);
            vm.a = 100; // 如果更新数据 watcher.update()方法
            console.log(vm.$el.innerHTML,'11111111111111')
            vm.$nextTick(()=>{
                console.log(vm.$el.innerHTML,'22222222222222')
            })
        }, 1000);
        // setTimeout(() => {
        //     vm.school.a ; // 重新调用_render 在调用_update
           
        //     // 数据变化 自动调用   vm._update(vm._render()); 就可以了
        //     // vue更新策略是以组件为单位的，给每个组件都增加了一个watcher，属性变化后会重新调用这个watcher （渲染watcher）
        // }, 1000);
     
        // watcher和dep的互记 watcher去重  异步更新
        // 组件的渲染 Vue.extend
        // diff算法 vue-router vuex
        // 计算属性 watch的实现

        // 树的深度遍历


        // 1.我取arr的值 会调用get方法 我希望让当前数组记住这个渲染watcher 
        // 2.我给所有的对象类型都增加一个dep属性
        // 3.当页面对arr取值时 我就让数组的dep记住这个watcher
        // 等会我更新数组时 push shift 方法时 找到数组对应的watcher来更新


        

    </script>



</body>

</html>